﻿@model Tuple<List<QuanLyCuaHang.Models.KhuVuc>,List<QuanLyCuaHang.Models.CuaHang>>

@{
    ViewBag.Title = "Regions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" type="text/css" href="~/Content/Content/style.css"/>
<script type="text/javascript" src="~/Content/Content/redips-drag-min.js"></script>	
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link href="~/Content/Content/Opacity.css" rel="stylesheet" />
<script src="~/Content/script.js"></script>
<script>
    var TenCuaHang;
    var MieuTa;
    var LoaiKinhDoanh;
    var LoaiCuaHang;
    var ChuCuaHang;
    var DiaChi;
    var Id;
    var state = "nochange";
    function changeCss() {
        $('#iframe').attr('src', function (i, val) {
            return val;
        });
        $('#fontback').fadeIn();
        $('#content').css({
            "margin-left": (-$('#content').css("width").substring(0, $('#content')
                .css("width").length - 2) / 2 - 50) + "px",
            "margin-top": (-$('#content').css("height").substring(0, $('#content')
                .css("height").length - 2) / 2 - 5) + "px",
        });
        $('#content').fadeIn();        
    }
    function changeCss2() {
        $('#iframe2').attr('src', function (i, val) {
            return val;
        });
        $('#fontback2').fadeIn();
        $('#content2').css({
            "margin-left": (-$('#content2').css("width").substring(0, $('#content2')
                .css("width").length - 2) / 2 - 50) + "px",
            "margin-top": (-$('#content2').css("height").substring(0, $('#content2')
                .css("height").length - 2) / 2 - 5) + "px",
        });
        $('#content2').fadeIn();
    }
    function resetcss() {
        $('#content').fadeOut();
        $('#fontback').fadeOut();
        var ms = top.document.getElementById("if")
            .contentDocument.getElementById("message");
        ms.style.display = "none";
        var info = top.document.getElementById("if")
            .contentDocument.getElementById("StoreInfo");
        info.style.display = "block";
    }
    function resetcss2() {
        $('#content2').fadeOut();
        $('#fontback2').fadeOut();
        var ms = top.document.getElementById("if2")
            .contentDocument.getElementById("message");
        ms.style.display = "none";        
        var info = top.document.getElementById("if2")
            .contentDocument.getElementById("StoreInfo");
        info.style.display = "block";
    }
    function addstore() {
        if (state == "changed") {
            if (TenCuaHang != null &&
                MieuTa != null &&
                LoaiKinhDoanh != null &&
                LoaiCuaHang != null &&
                ChuCuaHang != null &&
                Id != null &&
                DiaChi != null)
            {                
                $('#store div:last').after(                                       
                        '<p></p>' +
                        '<p></p>' +
                        '<div style="text-align:left" class="drag" id="l_' + Id + '">' +
                            'Tên cửa hàng <b>' + TenCuaHang + '</b>, Chủ cửa hàng là ' + ChuCuaHang +
                        '</div>'                                    
                );
            }
            state == "nochanged";
            /// init lại để thêm dòng mới vào
            REDIPS.drag.init();
        }
    }
    function addregion() {
        if (state2 == "changed") {
            if (vTen != null &&
                vMieuTa != null &&                
                vId != null &&
                vDiaChi != null) {
                $('#region tr:last').after(
                    '<tr>' +
                        '<td style="padding: 5px">' +
			                '<div class="regionsName headerStore" style="background-color: #c5e0b4">Khu vực ' + vTen +'</div>' +
                            '<p style="min-height: 5px"></p>' +
                        '</td>' +
                    '</tr>' + 
                    '<tr>' +
                        '<td class="mark" style="' +
                                'border-color: white;' +
                        'background-color: #fff;' +
                        '"></td>' +
                    '</tr>'
                );
            }
            state2 == "nochanged";
            /// init lại để thêm dòng mới vào
            REDIPS.drag.init();
        }
    }
</script>	
<h2>Quản lý cửa hàng</h2><br />
<script>
    @{
        int number = Model.Item2.Count;
        string mes;    
        foreach (var item in Model.Item2)
        {       
            string str = item.CuaHangId.ToString();
            mes = "REDIPS.drag.mark.exception.l_" + str + ";\n"; 
            @mes;
        }  
    }    
    //REDIPS.drag.only.div.l_1c0 = 'lc_1';
    
    function closeIframe() {
        $('#content').fadeOut();
        $('#fontback').fadeOut();
        return false;
    }
    function ChangeRequest() {
        /// Quét các thẻ tr của bảng 1 để lấy thẻ div
        var storeIds_div = $('#bang1 tr');
        var request = '';
        for (var i = 1; i < storeIds_div.length; i++) {
            var dragdiv = $('.drag', storeIds_div[i]);
            // vungId=
            if (dragdiv.length > 0) {   // Nếu có cột được đẩy sang
                request += storeIds_div[i].getAttribute("data-id") + '=';
                // vungId=CuaHangId1+CuaHangId2+...
                for (var j = 0; j < dragdiv.length - 1; j++) {
                    request += dragdiv[j].getAttribute("data-id") + '+';
                }
                request += dragdiv[j].getAttribute("data-id");
                request += ';';
            }
                       
        }
        
        if (request.length == 0) {
            alert("Bạn phải thay đổi trên giao diện trước khi gửi request!");
            return;
        }
        //alert(request);
        $.ajax({
            type: "POST",
            url: "@Url.Action("ChangeRegions", "Home")",
            data: {str:request},
            dataType: "json",
            success: OnSuccessChangeRegions  
        });
    }
    function OnSuccessChangeRegions(data) {
        alert(data);
    }
</script>

<div id="drag">
    <div style="text-align: right; padding: 27px; clear: both">
        <input type="button" style="margin: 0px" value="Thêm cửa hàng" onclick="changeCss()"/>
        <input type="button" 
            style="margin: 0px; float: left; margin-left: -28px" 
            value="Thay đổi vùng" onclick="ChangeRequest()"/>
        <input type="button" 
            style="margin: 0px; float: left;" 
            value="Thêm vùng" onclick="changeCss2()"/>
    </div>
	<table style="float: left" id="region">
		<colgroup>
			<col style="width: 450px">                  	
		</colgroup>       
		<tbody>
            @foreach (var item in Model.Item1)
            {
                <tr>
                    <td style="padding: 5px">                        
			            <div class="regionsName headerStore" style="background-color: #c5e0b4">Khu vực @item.Ten</div>
                        <p style="min-height: 5px"></p>
                    </td>
                </tr>
                <tr>
                    <td class="mark" style="
                        border-color: white;
                        background-color: #fff;
                    "></td>
                </tr>
            }
		</tbody>
	</table>
    <table style="float: left" id="store">
		<colgroup>
			<col style="width: 550px">
		</colgroup>
        <thead>
            <tr>
                <td class="mark regionsName" style="padding: 5px;"><div class="headerStore" style="background-color: #c5e0b4">Tên cửa hàng</div></td>
            </tr>
            
        </thead>
		<tbody>
            <tr>
                <td>
		    @foreach (var item in Model.Item2)
            {
                <p></p>
                <p></p>
                <div style="text-align:left" class="drag " id="l_@item.CuaHangId">
                    Tên cửa hàng <b> @item.TenCuaHang </b>, Chủ cửa hàng là @item.ChuCuaHang                        
                </div>
            }	 
                </td>
            </tr>
		</tbody>
	</table>    
</div>	
@*// add stores*@
<div id="iframe">
    <div id="fontback"></div>
    <div></div>
    <div id="content">
        <div>
            <a id="buttoncloseiframe" onclick="resetcss()"></a>        
        </div>
	    <iframe id="if" src="@Url.Action("AddStore", "Home")" style="width: 100%; height: 100%" >
        
	    </iframe>
    </div>	
</div>
<div id="iframe2">
    <div id="fontback2"></div>
    <div></div>
    <div id="content2">
        <div>
            <a id="buttoncloseiframe2" onclick="resetcss2()"></a>
        </div>
	    <iframe id="if2" src="@Url.Action("AddRegion", "Home")" style="width: 100%; height: 100%" >
        
	    </iframe>
    </div>	
</div>